<template>
  <!-- site wrapper -->
  <div class="site-wrapper">
    <div class="main-overlay"></div>
    <!-- header -->
    <header class="header-default">
      <navbar></navbar>
    </header>
    <!-- section main content -->
    <section class="main-content mt-3">
      <div class="container-xl">
        <nav aria-label="breadcrumb">
          <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="#">首页</a></li>
<!--            <li class="breadcrumb-item"><a href="#" >{{article.bizCategory.name}}</a></li>-->
            <li class="breadcrumb-item active" aria-current="page" :text="article.title"></li>
          </ol>
        </nav>
        <div class="row gy-4">
          <div class="col-lg-8"><!-- post single -->
            <div class="post post-single"><!-- post header -->
              <div class="post-header">
                <h1 class="title mt-0 mb-3">{{article.title}}</h1>
                <ul class="meta list-inline mb-0">
                  <li class="list-inline-item"><a href="#"><img src="/source/images/other/author-sm.png" class="author" alt="author" >{{article.author}}</a></li>
                  <li class="list-inline-item"><a href="#">Trending</a></li>
                  <li class="list-inline-item">29 March 2021</li>
                </ul>
              </div>
              <!-- featured image -->
              <div class="featured-image"><img :src="article.coverImage" alt="post-title" /></div>
              <!-- post content -->
              <div v-html="article.content"  class="post-content clearfix">
              </div>
              <!-- post bottom section -->
              <div class="post-bottom">
                <div class="row d-flex align-items-center">
                  <div class="col-md-6 col-12 text-center text-md-start">
                    <a v-for="item in article.tags" href="#" class="tag" >{{item.name}}</a>
                    <div class="col-md-6 col-12"><!-- social icons -->
                    </div>
                  </div>
                </div>
              </div>
              <!--         <div class="spacer" data-height="50"></div>
                       <div class="about-author padding-30 rounded">
                         <div class="thumb"><img th:src="@{|/${WEB_THEME}/images/other/avatar-about.png|}" alt="泰山创作" /></div>
                         <div class="details">
                           <h4 class="name"><a href="#">Katen Doe</a></h4>
                           <p>Hello,I’m a content writer who is fascinated by content fashion,celebrity and lifestyle. She helps clients bring the right content to the right people.</p>
                           &lt;!&ndash; social icons &ndash;&gt;
                           <ul class="social-icons list-unstyled list-inline mb-0">
                             <li class="list-inline-item"><a href="#"><i class="fab fa-facebook-f"></i></a></li>
                             <li class="list-inline-item"><a href="#"><i class="fab fa-twitter"></i></a></li>
                             <li class="list-inline-item"><a href="#"><i class="fab fa-instagram"></i></a></li>
                             <li class="list-inline-item"><a href="#"><i class="fab fa-pinterest"></i></a></li>
                             <li class="list-inline-item"><a href="#"><i class="fab fa-medium"></i></a></li>
                             <li class="list-inline-item"><a href="#"><i class="fab fa-youtube"></i></a></li>
                           </ul>
                         </div>
                       </div>-->
              <template v-if="article.comment==1">
                <comment></comment>
              </template>

            </div>
          </div>
          <div class="col-lg-4"><!-- sidebar -->
            <sidebar></sidebar>
          </div>
        </div>
      </div>
    </section>
    <!-- instagram feed -->
    <div class="instagram">
      <div class="container-xl"><!-- button --><a href="#" class="btn btn-default btn-instagram">@Katen on Instagram</a><!-- images -->
        <div class="instagram-feed d-flex flex-wrap">
          <div class="insta-item col-sm-2 col-6 col-md-2"><a href="#"><img src="/images/insta/insta-1.jpg" alt="insta-title" /></a></div>
          <div class="insta-item col-sm-2 col-6 col-md-2"><a href="#"><img src="/images/insta/insta-2.jpg" alt="insta-title" /></a></div>
          <div class="insta-item col-sm-2 col-6 col-md-2"><a href="#"><img src="/images/insta/insta-3.jpg" alt="insta-title" /></a></div>
          <div class="insta-item col-sm-2 col-6 col-md-2"><a href="#"><img src="/images/insta/insta-4.jpg" alt="insta-title" /></a></div>
          <div class="insta-item col-sm-2 col-6 col-md-2"><a href="#"><img src="/images/insta/insta-5.jpg" alt="insta-title" /></a></div>
          <div class="insta-item col-sm-2 col-6 col-md-2"><a href="#"><img src="/images/insta/insta-6.jpg" alt="insta-title" /></a></div>
        </div>
      </div>
    </div>
    <!-- footer -->
    <footer></footer>
<!--    <footer>
      <div class="container-xl">
        <div class="footer-inner">
          <div class="row d-flex align-items-center gy-4">&lt;!&ndash; copyright text &ndash;&gt;
            <div class="col-md-4"><span class="copyright">© 2021 Katen. Template by ThemeGer.</span></div>
            &lt;!&ndash; social icons &ndash;&gt;
            <div class="col-md-4 text-center">
              <ul class="social-icons list-unstyled list-inline mb-0">
                <li class="list-inline-item"><a href="#"><i class="fab fa-facebook-f"></i></a></li>
                <li class="list-inline-item"><a href="#"><i class="fab fa-twitter"></i></a></li>
                <li class="list-inline-item"><a href="#"><i class="fab fa-instagram"></i></a></li>
                <li class="list-inline-item"><a href="#"><i class="fab fa-pinterest"></i></a></li>
                <li class="list-inline-item"><a href="#"><i class="fab fa-medium"></i></a></li>
                <li class="list-inline-item"><a href="#"><i class="fab fa-youtube"></i></a></li>
              </ul>
            </div>
            &lt;!&ndash; go to top button &ndash;&gt;
            <div class="col-md-4"><a href="#" id="return-to-top" class="float-md-end"><i class="icon-arrow-up"></i>Back to Top</a></div>
          </div>
        </div>
      </div>
    </footer>-->
  </div>
</template>

<script>
module.exports= {
  name: "article",
  components: {
    'navbar': httpVueLoader('../components/navbar.vue'),
    'footer': httpVueLoader('../components/footer.vue'),
    'sidebar':httpVueLoader('../components/sidebar.vue'),
    'comment':httpVueLoader('../components/comment.vue')
  },
  data: function() {
    return {
      article: {},
    }
  },
  mounted(){
    this.getArticle(1);
  },
  methods:{
    getArticle(id){
      axios.get('/blog/api/article/detail',{params:{articleId:this.$route.params.id}})
          .then((res) => {
            // 请求成功返回
            const data = res.data.data;
            this.article=data;
          })
          .catch(function (err) {
            // 请求失败返回
            console.log(err);
          })
          .then(function () {
            // 不管成功失败都会执行，可以用来关闭加载效果等
          });
    }
  }
}
</script>

<style scoped>

</style>